<template>
  <view class="flex-col page">
    <view class="flex-col justify-start items-start relative section">
      <text class="text text_2">会员专区</text>
      <view class="flex-col justify-start items-end group pos">
        <image class="image"
          src="http://ts.ysgzt.cn/static/images/wechat/resources/f83af8358e8e94150fbaf36c95319357.png" />

      </view>
    </view>
    <view class="flex-col relative section_2">
      <view class="flex-col">
        <text class="self-start text text_3">会员类型</text>
        <view class="mt-20 flex-row equal-division">
          <view class="flex-col items-start equal-division-item section_4" :class="{ 'section_3': sel_type === 1 }"
            @click="sel_to_pay(1)">
            <text class="font text " :class="sel_type === 1 ? 'text_6' : 'text_5'">VIP月卡</text>
            <view class="mt-18-5">
              <text class="font_3 text " :class="sel_type === 1 ? 'text_6' : 'text_5'">￥</text>
              <text class="font_2 text " :class="sel_type === 1 ? 'text_6' : 'text_5'">{{ yueka_money }}</text>
            </view>
          </view>
          <view class="flex-col items-start equal-division-item section_4 ml-14-5"
            :class="{ 'section_3': sel_type === 2 }" @click="sel_to_pay(2)">
            <text class="font text " :class="sel_type === 2 ? 'text_6' : 'text_5'">VIP会员年卡</text>
            <view class="mt-18-5">
              <text class="font_3 text " :class="sel_type === 2 ? 'text_6' : 'text_5'">￥</text>
              <text class="font_2 text " :class="sel_type === 2 ? 'text_6' : 'text_5'">{{ nianka_money }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="flex-col group_2 mt-219-5">
        <view class="flex-row justify-center items-center group_3">

          <image v-if="tk_sel == 1" @click="check_tk(0)" class="image_3"
            src="http://ts.ysgzt.cn/static/images/wechat/resources/8582270633e3f175ddc5fb5b0e830840.png" />
          <text class="image_3" style="border-radius: 50%; border: 1rpx solid black;" v-if="tk_sel == 0"
            @click="check_tk(1)"></text>
          <text class="ml-8 text text_10">我已阅读并同意《会员及付费购买服务协议》</text>
        </view>
        <view class="flex-row justify-center items-center section_5" @click="buy">
          <text class="font_4 text">{{ pay_price }}</text>
          <text class="font_4 text ml-3-5">立即购买</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      sel_type: 1,
      yueka_money: '',
      nianka_money: '',
      pay_price: 29.9,
      userInfo: {},
      tk_sel: 1,

    };
  },
  onShow() {
    this.getGroupInfo();
  },
  methods: {
    sel_to_pay(val) {
      this.sel_type = val
      if (val == 1) {
        this.pay_price = this.yueka_money
      } else {
        this.pay_price = this.nianka_money
      }
    },
    getGroupInfo() {
      this.userInfo = uni.getStorageSync('userInfo');
      this.$api.sendRequest({
        url: '/api/index/getGroupInfo',
        data: {},
        success: res => {
          if (res.code == 1) {
            this.yueka_money = res.data.yueka_money;
            this.nianka_money = res.data.nianka_money;
            this.pay_price = res.data.yueka_money
          }
        }
      });
    },
    //发起支付
    buy() {
      if (this.tk_sel == 0) {
        this.$util.showToast({
          title: '请阅读并同意协议'
        });
        return
      }
      uni.showLoading({
        title: '提交订单中'
      })

      this.$api.sendRequest({
        url: '/api/index/createOrder',
        data: {
          type: this.sel_type,
          user_id: this.userInfo.id
        },
        success: res => {
          if (res.code == 1) {
            uni.showLoading({
              title: '请求支付中'
            })
            var payData = res.data;
            this.pay(payData)
          } else {
            this.$util.showToast({
              title: '创建订单失败,请重试'
            });
          }
        }
      });
    },
    check_tk(val) {
      this.tk_sel = val
    },
    pay(payData) {
      var that = this;
      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: payData.timeStamp ?
          payData.timeStamp : payData
            .timeStamp,
        nonceStr: payData.nonceStr,
        package: payData.package,
        signType: payData.signType,
        paySign: payData.paySign,
        success: function (res) {
          console.log(res)
          uni.hideLoading();
          if (res.errMsg == 'requestPayment:ok') {
            that.$util.showToast({
              title: '支付成功'
            });
            that.show_level = false;
            that.getUserInfo();
          } else {
            console.log(res)
            that.$util.showToast({
              title: '支付失败'
            });
          }
        },
        fail: function (err) {
          uni.hideLoading();
          that.$util.showToast({
            title: '支付失败'
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.mt-18-5 {
  margin-top: 37rpx;
}

.ml-14-5 {
  margin-left: 29rpx;
}

.mt-219-5 {
  margin-top: 439rpx;
}

.ml-3-5 {
  margin-left: 7rpx;
}

.page {
  background-color: #00000000;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;

  .section {
    padding: 215rpx 0 61rpx;
    background-image: linear-gradient(45deg, #e9ba7d 0%, #eecfa0 100%);

    .text_2 {
      margin-left: 57rpx;
      color: #743a01;
      font-size: 48rpx;
      font-family: PingFangSC;
      line-height: 46rpx;
    }

    .group {
      width: 683rpx;

      .image {
        width: 352rpx;
        height: 315rpx;
      }

      .image_2 {
        width: 671rpx;
        height: 140rpx;
      }

      .pos_2 {
        position: absolute;
        left: 0;
        right: 12rpx;
        top: 19rpx;
      }
    }

    .pos {
      position: absolute;
      right: 0;
      top: 15rpx;
    }
  }

  .section_2 {
    margin: -11rpx 16rpx 0;
    padding: 39rpx 31rpx 100rpx;
    background-color: #ffffff;
    border-radius: 10rpx 10rpx 0 0;

    .text_3 {
      margin-left: 3rpx;
      color: #000000;
      font-size: 30rpx;
      font-family: PingFangSC;
      line-height: 29rpx;
    }

    .equal-division {
      align-self: stretch;

      .text_6 {
        color: #743a01;
      }

      .text_5 {
        color: #000000;
      }

      .equal-division-item {
        flex: 1 1 313rpx;

        .font {
          font-size: 26rpx;
          font-family: PingFangSC;
          line-height: 25rpx;
        }

        .text_4 {
          color: #743a01;
        }

        .font_3 {
          font-size: 24rpx;
          font-family: PingFangSC;
          line-height: 19rpx;
        }

        .text_8 {
          color: #743a01;
        }

        .font_2 {
          font-size: 56rpx;
          font-family: PingFangSC;
          line-height: 44rpx;
        }

        .text_6 {
          color: #743a01;
        }

        .text_5 {
          color: #000000;
        }

        .text_9 {
          color: #000000;
        }

        .text_7 {
          color: #000000;
        }
      }

      .section_4 {
        padding: 68rpx 42rpx;
        border-radius: 30rpx;
        background-image: url('http://ts.ysgzt.cn/static/images/wechat/resources/217f69928592f4dcc2fabb49fa2bc154.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        height: 240rpx;
        z-index: 2;
      }

      .section_3 {
        padding: 68rpx 42rpx;
        border-radius: 30rpx;
        background-image: url('http://ts.ysgzt.cn/static/images/wechat/resources/361d93605b3c25e753bb76bab2b452ec.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        height: 240rpx;
        z-index: 3;
      }
    }

    .group_2 {
      padding: 0 16rpx;

      .group_3 {
        padding-left: 9rpx;
        padding-bottom: 32rpx;

        .image_3 {
          width: 24rpx;
          height: 24rpx;
        }

        .text_10 {
          color: #000000;
          font-size: 20rpx;
          font-family: PingFangSC;
          line-height: 20rpx;
        }
      }

      .section_5 {
        padding: 24rpx 0;
        background-image: linear-gradient(45deg, #e9bc81 0%, #f2d6ad 100%);
        border-radius: 40rpx;

        .font_4 {
          font-size: 36rpx;
          font-family: PingFangSC;
          line-height: 28rpx;
          color: #743a01;
        }
      }
    }
  }

  .text {
    text-transform: uppercase;
  }
}
</style>